<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
    <div id="main" style="width: 800px;height:400px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById('main'));


        const data = [
            { name: '今日', value: 4260 },
            { name: '比昨日+', value: 3970 },
            { name: '本周', value: 3454 },
            { name: '上周同期+', value: 2390 },
        ]
        const colorList = [
            '#FFA600',
            '#FEDB65',
            '#026DB2',
            '#12FEE0',
            '#6DD400',
            '#44D7B6',
            '#5C64FF',
            '#6988F8',
            '#0E5FFF',
            '#2DE1FD',
            '#8221F1',
            '#B26DF6',
        ]
        // 声明
        var dataNum = 0;
        // 遍历
        for (var i in data) {
            // 获取总数
            dataNum += data[i].value;
        }

        option = {
            // 环形图中间默认显示文字
            title: {
                show: true,
                text: '总销售',
                itemGap: 10, //主副标题之间的距离
                x: 'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
                y: 'center',
                subtext: dataNum,
                textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                    fontSize: 14,
                    color: '#999999'
                },
                subtextStyle: {//副标题文本样式{"color": "#aaa"}
                    fontSize: 19,
                    fontWeight: "bold",
                    color: '#333333'
                },
            },
            tooltip: {
                backgroundColor: '#fff',
                extraCssText: 'box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);',
                backgroundColor: 'rgba(0,0,0,0.75)',
                // padding: [12, 16, 12, 16],
                textStyle: {
                    color: '#FFFFFF'
                },
                // 悬浮的位置可以调整，总距离左边10px
                position: (point) => {
                    // return ['100', point[1]]
                },
                formatter: (param) => {
                    let { name, value } = param
                    let result = `<div>${name}：${value}(个)</div>`
                    return result
                }
            },
            legend: {
                orient: 'vertial',
                itemWidth: 16,
                itemHeight: 16,
                icon: 'circle',
                right: 150,
                bottom: '40%',
                data: data,
                textStyle: {
                    color: 'rgba(0,0,0,0.65)'
                },
                formatter: (name) => {
                    const value = data.find(item => item.name === name).value
                    return `${name}：${value} 个`
                }
            },
            series: [{
                type: 'pie',
                radius: ['20%', '30%'],
                // center: ['30%', '50%'], // 图形位置
                label: { // 鼠标悬浮具体数据显示
                    show: false
                },
                data: data,
                itemStyle: {
                    color: function (params) {
                        var index = params.dataIndex + params.dataIndex;
                        const colorStops = [{
                            offset: 1,
                            color: colorList[index]
                        }, {
                            offset: 0,
                            color: colorList[index + 1]
                        }];
                        return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorStops)
                    },
                },
            }]
        };



        myChart.setOption(option);

    </script>
</body>

</html>